<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>族谱网 - 首页</title>


    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery/jquery2.2.4.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <link href="assets/fs002/fs_0.2.css" rel="stylesheet">
    <link href="assets/fitness/all_fit.css" rel="stylesheet">
    <link href="assets/fitness/index_fit.css" rel="stylesheet">

    <style type="text/css">

<style type="text/css">
*{margin:0;padding:0;}
.clears{ clear:both;}
/*messages*/
.messages{padding:15px 0;}
.messages input,.messages select,.messages textarea{margin:0;padding:0; background:none; border:0; font-family:"Microsoft Yahei";}
.messlist {height:30px;margin-bottom:10px;}
.messlist label{float:left;width:108px; height:30px; font-size:14px; line-height:30px; text-align:right;padding-right:10px;}
.messlist input{float:left;width:300px;height:28px;padding-left:5px;border:#ccc 1px solid;}
.messlist.textareas{ height:auto;}
.messlist textarea{float:left;width:400px; height:110px;padding:5px;border:#ccc 1px solid;}
.messlist.yzms input{width:100px;}
.messlist.yzms .yzmimg{ float:left;margin-left:10px;}
.messsub{padding:0px 0 0 110px;}
.messsub input{width:105px; height:35px; background:#ddd; font-size:14px; font-weight:bold; cursor:pointer;margin-right:5px}
.messsub input:hover{ background:#f60;color:#fff;}

</style>


    <style>
        #verify {
            height: 34px;
            vertical-align: top;
            font-size: 16px;
        }

        #code_img {
          width: 100px;
    height: 34px;
    cursor: pointer;
    vertical-align: top;
    margin-left: 17px;
        }
    </style>

  </style>
</head>
<body>
<div class="container-fluid zp-topper">
    <div class="row">
        <div class="container">
            <img src="assets/img/logo.png">
            <span style="color:darkgoldenrod;">登录  &nbsp; 查询族谱</span>
        </div>
    </div>
</div>


<div class="navbar navbar-default">
    <div class="container">
        <a class="navbar-brand" href="#"></a>
        <div class="collapse navbar-collapse" id="topbar">
            <ul class="nav navbar-nav">
                <li class=""><a href="index.html">首页</a></li>
                <li class=""><a href="list.html">百家姓</a></li>
         <li class=""><a>留言板</a></li>
                 <!--  <li class=""><a>搜索查询</a></li> -->
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class=""><a href="sign.html">登陆族谱</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-warning" style="padding-bottom: 30px;min-height:700px;display: inline-block;">
                <div class="panel-heading">留言与反馈</div>
                <div class="panel-body" style="padding-left: 0px; width: 1000px">
                   

             <form action="#" method="get" class="messages">
     <div class="messlist">
      <label>姓名</label>
      <input type="text" placeholder="姓名" />
      <div class="clears"></div>
     </div>
     <div class="messlist">
      <label>电子邮件</label>
      <input type="text" placeholder="电子邮件" />
      <div class="clears"></div>
     </div>
     <div class="messlist">
      <label>手机号</label>
      <input type="text" placeholder="手机号" />
      <div class="clears"></div>
     </div>
     <div class="messlist textareas">
      <label>留言内容</label>
      <textarea placeholder="留言内容"></textarea>
      <div class="clears"></div>
     </div>
     <div class="messlist yzms">
      <label>验证码</label>
      <input class="topAlign" id="verify" name="verify" type="text" placeholder="验证码" />
     
         <canvas width="100" height="40" id="verifyCanvas"></canvas>
        <img id="code_img">
      <div class="clears"></div>
     </div>
     <div class="messsub" style="   ">
      <input type="submit" value="提交" style="background-color: rgb(255,147,38);color:#fff; margin-right:5px;" />
      <input type="reset" value="重填" />
     </div>
</form> 

                </div>

            </div>
        </div>

    </div>
</div>

<div class="container-fluid" style="background: #fff;padding-top: 10px;">
    <div class="container">
        <div id="footer" style="margin-bottom:20px;">
            <ul id="copyright" style="margin-left:0px;line-height:130%;">
                
            <div style="width:300px;margin:0 auto; padding:20px 0;">
                <a target="_blank" # style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤公网安备 43018102000107号</p></a>
            </div>
        </div>
    </div>
</div>

<script>
    var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
        'y', 'z'];

    drawCode();
    // 绘制验证码
    function drawCode() {
        var canvas = document.getElementById("verifyCanvas");  //获取HTML端画布
        var context = canvas.getContext("2d");                 //获取画布2D上下文
        context.fillStyle = "cornflowerblue";                  //画布填充色
        context.fillRect(0, 0, canvas.width, canvas.height);   //清空画布
        context.fillStyle = "white";                           //设置字体颜色
        context.font = "25px Arial";                           //设置字体
        var rand = new Array();
        var x = new Array();
        var y = new Array();
        for (var i = 0; i < 5; i++) {
            rand[i] = nums[Math.floor(Math.random() * nums.length)]
            x[i] = i * 16 + 10;
            y[i] = Math.random() * 20 + 20;
            context.fillText(rand[i], x[i], y[i]);
        }
        //画3条随机线
        for (var i = 0; i < 3; i++) {
            drawline(canvas, context);
        }

        // 画30个随机点
        for (var i = 0; i < 30; i++) {
            drawDot(canvas, context);
        }
        convertCanvasToImage(canvas)
    }

    // 随机线
    function drawline(canvas, context) {
        context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));             //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
        context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
        context.lineWidth = 0.5;                                                  //随机线宽
        context.strokeStyle = 'rgba(50,50,50,0.3)';                               //随机线描边属性
        context.stroke();                                                         //描边，即起点描到终点
    }
    // 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
    function drawDot(canvas, context) {
        var px = Math.floor(Math.random() * canvas.width);
        var py = Math.floor(Math.random() * canvas.height);
        context.moveTo(px, py);
        context.lineTo(px + 1, py + 1);
        context.lineWidth = 0.2;
        context.stroke();

    }
    // 绘制图片
    function convertCanvasToImage(canvas) {
        document.getElementById("verifyCanvas").style.display = "none";
        var image = document.getElementById("code_img");
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    // 点击图片刷新
    document.getElementById('code_img').onclick = function () {
        $('#verifyCanvas').remove();
        $('#verify').after('<canvas width="100" height="40" id="verifyCanvas"></canvas>')
        drawCode();
    }
</script>

</body>
</html>